<template>
    <div v-if="data.length > 0">
        <PayItem :load="loadData" v-for="item in data" :key="item.id" :item="item" />
    </div>
    <div v-else class="p-12 mt-2 text-sm text-center text-gray-400 bg-gray-100 rounded-lg">
        暂无数据
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue'
import PayItem from './PayItem.vue'
import { GetOrderIndexApi } from '@/apis/payment'

const data = ref([])
const status = ref(0)
let timer = 0
const page = ref(1)

watch(status, () => {
    loadData(true)
})

async function loadData(refresh: boolean) {
    const { list } = await GetOrderIndexApi({ page: 1, limit: 1000, orderStatus: status.value })
    if (refresh) {
        page.value = 1
        data.value = list;
        return;
    }
    data.value.push(...list)
    // data 去重复
    data.value = data.value.filter((item, index, self) => {
        return self.findIndex(i => i.id === item.id) === index
    })
}

function refreshData() {
    setTimeout(() => {
        loadData(false)
        refreshData()
    }, 15000)
}

onMounted(() => {
    loadData(true)
    refreshData()
})
onUnmounted(() => {
    clearTimeout(timer)
})
</script>
